<template>
	<div class="video-card-common" v-if="cardCommon">
		<div class="card-pic" @click="toPlay">
			<div
				class="card-play"
				@mouseenter="handlePlay"
				@mouseout="isPlay = false"
			>
				<!-- :autoplay="isPlay" -->

				<video
					v-if="isPlay"
					muted
					:autoplay="isPlay"
					ref="videoItem"
					:src="cardCommon.videoUrl"
				></video>
				<img v-else :src="cardCommon.coverPic" alt="" />
			</div>
			<p class="card-pic-detail">
				{{ cardCommon.vTitle }}
			</p>
			<div class="video-card_mask">
				<div class="mask-left">
					<div class="mask-play">
						<i class="iconfont icon-24gl-playSquare"></i>
						<span>{{ cardCommon.vPlay }}</span>
					</div>
					<div class="mask-zan">
						<i class="iconfont icon-dianzan"></i>
						<span>{{ cardCommon.vLike }}</span>
					</div>
				</div>
				<div class="mask-right">
					<span>{{ cardCommon.vTime }}</span>
				</div>
			</div>
		</div>
		<a href="javascript:;" class="ex-up">
			<i class="iconfont icon-UPzhu"></i>
			{{ cardCommon.uname }} * {{ cardCommon.upTime }}
		</a>
	</div>
</template>

<script>
export default {
	// 每个单独视频组件
	name: "CardCommon",
	props: ["cardCommon"],
	data() {
		return {
			isPlay: false,
		};
	},
	methods: {
		handlePlay() {
			this.isPlay = true;
			// this.$nextTick(() => {
			// 	console.log(this.$refs.videoItem);
			// 	if (this.$refs.videoItem) {
			// 		// this.$refs.videoItem.play();
			// 		console.log(this.$refs.videoItem.duration);
			// 	}
			// });
		},
		toPlay() {
			let routeUrl = this.$router.resolve({
				path: "/detail",
				query: {
					vid: this.cardCommon.vid,
					uid: this.cardCommon.uid,
				},
			});
			window.open(routeUrl.href, "_blank");
		},
	},
};
</script>

<style lang="less" scoped>
a,
a:hover {
	text-decoration: none;
}
.video-card-common {
	width: 240px;
	height: 240px;
	// margin-right: 12px;
	padding-right: 12px;
	box-sizing: border-box;
	cursor: pointer;
	.card-pic {
		position: relative;
		width: 100%;
		height: 152px;
		.card-play {
			height: 100%;
			border: 1px solid #eee;
			border-radius: 7px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 7px;
			}
			video {
				width: 100%;
				height: 100%;
				// 视频平铺
				object-fit: fill;
				border-radius: 7px;
			}
		}
		.card-pic-detail {
			font-size: 14px;
			line-height: 20px;
			margin: 10px 0 8px;
			height: 40px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-weight: 600;
			padding-right: 12px;
			transition: color 0.5s;
		}
		.card-pic-detail:hover {
			color: #00aeec;
		}
	}
	.ex-up {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #999;
		line-height: 16px;
		margin-top: 55px;
		font-weight: 600;
		transition: color 0.5s;
		.iconfont {
			margin-right: 4px;
			font-size: 14px;
		}
		&:hover {
			color: #00aeec;
		}
	}
	.card-pic .video-card_mask {
		position: absolute;
		height: 38px;
		bottom: 0;
		left: 0;
		width: 100%;
		color: #fff;
		font-weight: 500;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 8px 6px;
		box-sizing: border-box;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, 0.8) 100%
		);
		// opacity: 1;
		z-index: 2;
		// transition: opacity 0.5s;
		.mask-left {
			display: flex;
			// font-size: 12px;
			.mask-play {
				padding-right: 10px;
			}
			span {
				margin-left: 4px;
			}
		}
	}
	.card-pic:hover .video-card_mask {
		// opacity: 0;
		display: none;
	}
}
</style>
